<template>
  <div>
    <h1 class="m-v-10">生命周期钩子函数</h1>

    <h3 class="m-v-10">注册生命周期钩子</h3>

    <button @click='count++'>更新组建{{count}}</button>
    <button @click="createAnError">
      手动制作一个错误
    </button>

    <h3 class="m-v-10">生命周期图示</h3>
    <div>
      <img style="width:400px"
        src="@/assets/image/lifecycle.png"
        alt="">
    </div>
  </div>
</template>

<script setup>
import { onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onUnmounted, onUpdated, ref } from "@vue/runtime-core";

let count = ref(0)

function createAnError() {
  console.log(event);
}

onBeforeMount(() => {
  console.log('组建被挂载之前！');
})

onMounted(() => {
  console.log('组建挂载完成后执行！')
})


onBeforeUpdate(() => {
  console.log('组建更新之前！');
})

onUpdated(() => {
  console.log('组建更新了！')
})


onBeforeUnmount(() => {
  console.log('组建被卸载之前！')
})

onUnmounted(() => {
  console.log('组建卸载了！')
})

onErrorCaptured((e) => {
  console.log('捕获到组建发生错误！', e)
})


onRenderTracked((e) => {
  console.log('调试钩子，当组建渲染过程中追踪到响应式依赖时调用，仅在开发模式下可用', e)
})


onRenderTracked((e) => {
  console.log('调试钩子，当响应式变更触发组建渲染时调用', e);
})

onActivated(() => {
  console.log('当组建被缓存时调用')
})

onDeactivated(() => {
  console.log('当组建移除缓存时调用')
})
</script>

<style lang="scss" scoped>
</style>